<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>培训视频课程</title>
  <!-- 引入vant css样式文件 -->
  <link rel="stylesheet" href="./assets/css/vant.css" />
  <link rel="stylesheet" href="./assets/css/local.css" />
  <link rel="stylesheet" href="./assets/css/vant.css">
  <!-- 引入vue -->
  <script src="./assets/js/vue.2.5.16.js"></script>
  <!-- 引入vant js文件 -->
  <script src="./assets/js/vant.min.js"></script>
  <script src="./assets/js/video.min.js"></script>
  <style type="text/css">
    [v-cloak] {
      display: none;
    }

    .video-js .vjs-duration,
    .vjs-no-flex .vjs-duration {
      display: block;
    }

    .video-js .vjs-current-time,
    .vjs-no-flex .vjs-current-time {
      display: block;
    }
  </style>
</head>

<body>
  <div id="app" class="main" v-cloak>
    <!-- 课程 -->
    <div v-show="!isCompare" v-if="shouJi">
      <div class="video_content">
        <div :class="shouJi=='Android'?'header-mian':'header-mianios' ">

          <div class="main-box" v-if="daohang">
            <img class="header" @click="goBack" src="./img/backimg.png" mode="" />
            <div class="main-boxHender">{{name}}</div>
          </div>
        </div>
        <video id="example_video_1" class="video-js vjs-big-play-centered vjs-fluid" style="width: 100%;"
          webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" x5-playsinline="true"
          x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src=""
          ref="myVideo" controls preload="none" oncontextmenu="return false" controlslist="noplaybackrate nodownload"
          disablePictureInPicture>
          <!-- <source src="https://slsp.slyb.top/sv/7bf13bd-180b1012dc8/7bf13bd-180b1012dc8.mp4" type="video/mp4"> -->
        </video>
      </div>
      <div class="lessons_content">
        <van-tabs color="#1890FF" v-model="tabActive">
          <van-tab title="课程概述" :title-style="vanTabTitleStyle">
            <div class="vanTab_con">
              <van-image width="100" height="" fit="contain" src="./img/Groupblook.png"></van-image>
              <div class="desc" v-html="seachTextData"></div>
              <!-- <div class="desc">{{obj.desc}}</div> -->
            </div>
          </van-tab>
          <van-tab title="课程目录" :title-style="vanTabTitleStyle">
            <div class="vanTab_con scroll-view">
              <div :class="{'list_content': true, 'class_active': i==activeIndex}" v-for="(item, i) in sectionInfo"
                :key="item.perId+'-'+i" @click="activeFn(item, i)">
                <div class="list_info">
                  <div class="list_title">{{ item.zjName }}</div>
                  <div class="list_desc">
                    <div class="list_time1">时长</div>
                    <div class="list_time2"> {{
                        (item.ttimes / 60).toFixed(2).split(".")[1] == "00"
                          ? item.ttimes / 60
                          : (item.ttimes / 60).toFixed(2).split(".")[1].charAt(1) ==
                          "0"
                          ? (item.ttimes / 60).toFixed(1)
                          : (item.ttimes / 60).toFixed(2)
                        }}分钟</div>
                    <div class="" style="display: inline-block;" v-if="![44,45].includes(formData.jtype)">
                      <div class="list_state" v-if="item.status == -1">未学习</div>
                      <div class="list_state  content_blook" v-if="item.status == 0">正在学习</div>
                      <div class="list_state  content_red" v-if="item.status == 1">已完成</div>
                      <div class="list_state  content_red" v-if="item.status == 2">无效</div>
                    </div>
                  </div>
                </div>
                <!-- <van-image width="42" height="" fit="contain" src="./img/play.png"></van-image> -->
              </div>
            </div>
          </van-tab>
          <van-tab :title="formData.fileUrl?'工程简介':'课件内容'" :title-style="vanTabTitleStyle">
            <div class="vanTab_con">
              <div v-if="formData.fileUrl">
                <a href="javascript:;" @click="downloadFile(formData.fileUrl)">
                  <div class="footer">附件：
                    <div class="footer_block"> {{formData.zjName }}
                      <!-- <van-image width="16" height="" fit="contain" src="./img/download.png">
                        </van-image> -->
                    </div>
                  </div>
                </a>
              </div>
              <div class="" v-else>
                <van-image width="100" height="" fit="contain" src="./img/Groupcourseware.png">
                </van-image>
                <div class="desc">
                  <!-- <image :src="formData.fileUrl" mode=""></image> -->
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="老师简介" :title-style="vanTabTitleStyle">
            <div class="vanTab_con">
              <van-image width="100" height="" fit="contain" src="./img/Groupteacher.png"></van-image>
              <div class="desc" v-html="teacher"></div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 人脸识别 -->
    <div class="compareFaceBox" v-show="isCompare">
      <div class="videoBox">
        <video id="compare_video" class="compareVideo" webkit-playsinline="true" playsinline="true"
          x-webkit-airplay="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
          x5-video-orientation="portraint" src="" ref="compare_video" nocontrols preload="none"
          oncontextmenu="return false" controlslist="noplaybackrate nodownload" disablePictureInPicture>
          <!-- <source src="https://slsp.slyb.top/sv/7bf13bd-180b1012dc8/7bf13bd-180b1012dc8.mp4" type="video/mp4"> -->
        </video>
        <canvas class="compareCanvas" ref="compare_canvas"></canvas>
      </div>
      <div class="snap_tips">
        {{snapTips}}
      </div>
      <div class="btnList">
        <van-icon name="cross" class="snapCancel" @click="snapCancel"></van-icon>
        <div @click="snap">
          <div class="snap_btx" v-if="isSnaped">重新拍照</div>
          <van-icon name="stop-circle" class="snap_btn" v-else></van-icon>
        </div>
        <van-icon name="passed" class="snapSubmit" v-if="isSnaped" @click="snapSubmit"></van-icon>
        <div class="snapSubmit" v-else></div>
      </div>
    </div>

  </div>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
  <!-- <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> -->
  <script type="text/javascript" src="./assets/js/uni.webview.1.5.4.js"></script>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const myApp = new Vue({
      el: "#app",
      data: {
        daohang: true,
        shouJi: true,
        isCompare: true,
        snapTips: "请正面面对屏幕，点击下方按钮进行拍照",
        compareVideo: null,
        isSnaped: false,  //是否拍照
        UniIsReady: false, //是否触发了UniAppJSBridgeReady
        // video控制相关
        // videoUrl: "https://slsp.slyb.top/sv/1b584b43-180b0f119a4/1b584b43-180b0f119a4.mp4",
        videoUrl: "",
        videoState: false, //视频播放状态
        isPaused: true, //视频是否已暂停
        noticeList: {
          duration: 0, // 视频总时长
          realTime: 0, //实时播放进度
          initial_time: '', //视频跳转进度 秒
          currentTimed: null
        },
        // 学时
        studyTime: {
          currentTime: 0, //当前已学时长
          duration: 0, //总时长
        },
        timer: {}, //定时器
        pauseTimer: {}, //暂停定时器
        poster: "", //展示图
        controls: true, //是否显示控件
        control: false, //控件控制
        videoData: {}, //视频基础数据
        message: "123456",
        tabActive: 1, //tab的索引
        // 课程章节相关
        classId: 1, //课程类型
        sectionInfo: [], //课程章节数据
        activeIndex: 0, //当前选中的章节索引
        seachTextData: "", //课程概述
        teacher: "", //老师简介
        cloudId: null,
        start: false,
        formData: {}, //当前选中章节的表单
        // 人脸验证相关
        faceVeriIsRequired: false, //是否开启人脸验证
        recordCheckArr: [], //人脸验证时间节点集
        recordTime: 0, //正在验证的时间节点
        vanTabTitleStyle: {
          // "fontSize": "14px",
          "fontWeight": "500",
          // "padding": "20px"
        },
        obj: {
          list: [],
          teacher: {
            name: 'tt',
            age: 42,
            desc: "暂无"
          }
        },
        videoPlayer: null,
        options: {
          autoplay: false,
          muted: false,
          loop: false,
          preload: 'auto',
          controls: true,
          language: 'zh-CN',
          aspectRatio: '16:9',
          fluid: true,
          sources: [{
            src: "",
            type: "video/mp4"
          }],
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            remainingTimeDisplay: false, //
            currentTimeDisplay: true, // 当前时间
            timeDivider: true, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: true, // 进度条

            customControlSpacer: true, //
            fullscreenToggle: true, // 全屏按钮
            volumePanel: false
          }
        }
      },
      components: {

      },
      created() {
        // 清空页面数据
        this.clearAllList();
      },
      mounted() {
        this.compareVideo = this.$refs.compare_video;
        console.log(this.compareVideo);
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia) {
          //调用用户媒体设备, 访问摄像头
          this.getUserMedia({
            video: {
              deviceId: 'default',
              facingMode:'user',
              width: 200,
              height: 200
            }
          });
        } else {
          vant.Dialog.confirm({
            message: '不支持访问用户媒体'
          });
        }
      },
      methods: {
        //访问用户媒体设备的兼容方法
        getUserMedia(constraints) {
          if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(res => {
              this.success(res)
            }).catch(err => {
              this.error(err)
            });
          } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, res => {
              this.success(res)
            }, err => {
              this.error(err)
            })
          } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, res => {
              this.success(res)
            }, err => {
              this.error(err)
            });
          } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, res => {
              this.success(res)
            }, err => {
              this.error(err)
            });
          }
        },
        success(stream) {
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          console.log(stream);

          //video.src = CompatibleURL.createObjectURL(stream);
          this.compareVideo.srcObject = stream;
          this.compareVideo.play();
        },
        error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        },
        snap(){
          if (!this.isSnaped) {
            this.isSnaped = true;
            this.compareCanvas = this.$refs.compare_canvas;
            this.compareCanvas.width = 200;
            this.compareCanvas.height = 200;
            console.log(this.compareCanvas)
            let context = this.compareCanvas.getContext('2d');
            console.log(this.compareVideo)
            context.drawImage(this.compareVideo, 0, 0, 200, 200);
          } else {
            this.clearCanvas();
          }
        },
        snapSubmit() {
          let _base64 = this.compareCanvas.toDataURL();
          console.log(_base64);
          let filePath = "";
          base64ToPath(_base64)
          .then(path => {
            console.log(path);
          })
          .catch(err => {
            console.log(err);
          })
        },
        snapCancel() {
          this.isCompare = false;
          setTimeout(() => {
            vant.Dialog.alert({
              titile: "提示",
              message: "请进行人脸识别",
            }).then(() => {
              this.isCompare = true;
            })
          }, 5000);
        },
        clearCanvas() {
          this.isSnaped = false;
          let context = this.compareCanvas.getContext('2d');
          context.clearRect(0, 0, 200, 200)
        },

        // 返回
        goBack() {
          if (this.isPaused || [44, 45].includes(this.sectionInfo[this.activeIndex].jtype)) {
            // 暂停或水文化，直接返回
            this.postMessage("goBack", {});
          } else {
            // 保存后返回
            this.videoSaveFn(this.sectionInfo[this.activeIndex], true);
          }
        },
        // 初始化视频插件、绑定事件监听
        initVideoJs() {
          let _this = this;
          // videojs
          this.videoPlayer = videojs("example_video_1", {
            controls: true,
            autoplay: true,
            fluid: true,
            name: '',
            controlBar: {
              // 'currentTimeDisplay':true,
              // 'timeDivider':true,
              // 'durationDisplay':true,
              // 'remainingTimeDisplay':false
              /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
              children: [{
                  name: 'playToggle'
                }, // 播放按钮
                {
                  name: 'currentTimeDisplay'
                }, // 当前已播放时间
                {
                  name: 'progressControl'
                }, // 播放进度条
                {
                  name: 'durationDisplay'
                }, // 总时间
                {
                  name: 'volumePanel', // 音量控制
                  inline: false, // 不使用水平方式
                },
                {
                  name: 'FullscreenToggle'
                } // 全屏
              ]
            }
          })
        },
        // 初始化列表
        initList(data) {
          this.sectionInfo = data;

        },
        updateList(data) {
          console.log("--更新列表")
          this.sectionInfo = data;
          console.log(this.sectionInfo);
          if (!this.sectionInfo || (this.sectionInfo && this.sectionInfo.length == 0)) {
            this.postMessage("showToast", {
              message: "暂无数据"
            })
          };
        },
        // 选中章节事件
        activeFn(e, i, isAuto) {

        },
        // 获取人脸验证信息
        getFaceRecord() {
          this.postMessage("setFaceRecord", {
            activeIndex: this.activeIndex
          })
        },
        // 设置人脸识别时间节点
        setFaceRecord(data) {

        },
        // 获取
        getRecord() {

        },
        // 人脸验证弹窗
        faceRecordTips(msg) {


        },
        clearAllList() {
          // this.videoUrl = "";
          this.sectionInfo = [];
        },
      },
      watch: {
        "tabActive": function (val) {
          console.log('tabActive = ', val);
        }
      }
    })
    console.log(myApp)

    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    document.addEventListener('UniAppJSBridgeReady', function () {
      myApp.UniIsReady = true;
      // 通知APP：UniAppJSBridgeReady已触发
      // uni.postMessage({
      // 	data: {
      // 		action: "UniAppJSBridgeReady",
      // 		data: {}
      // 	}
      // })

      uni.getEnv(function (res) {
        console.log('当前环境：' + JSON.stringify(res));
        if (!res.plus) {
          vant.Dialog.alert({
            message: '当前为非plus环境，页面通信请在plus环境下调试',
          });
        }
      });

    });
  </script>
</body>

</html>